import React, { Component } from "react";
import Header from "../../components/Header/Header";
import iconposi from "../../assets/img/iconposi.png";
import {
  getCate,
  getBanner,
  getNew,
  getGoods,
  getN,
  getWanren,
  getSkill,
  actions,
} from "../../store/modules/home";
import logo from "../../assets/img/logo.png";
import "./home.less";
import Cate from "./components/cate/cate";
import Banner from "./components/banner/banner";
import GetNew from "./components/getNew/getNew";
import Goods from "./components/goods/goods";
import { SearchBar } from "antd-mobile";
import Wanrentuan from "./components/wanrentuan/wanrentuan";
import SecKill from "./components/Seckill/SecKill";
import { bindActionCreators } from "redux";

import { connect } from "react-redux";

class Home extends Component {
  componentDidMount() {
    let {
      home: {
        reqCate,
        reqBanner,
        reqGetnew,
        reqgetgoods,
        reqwanrentuan,
        reqSeckill,
      },
    } = this.props;
    reqCate();
    reqBanner();
    reqGetnew();
    reqgetgoods();
    reqwanrentuan();
    reqSeckill();
  }

  // computedTime() {
  //   this.time = 1658899658737;
  //   this.timer = setInterval(() => {
  //     let d = new Date().getTime();
  //     let t = this.time - d; //差的毫秒数
  //     if (t > 0) {
  //       let day = (Math.floor(t / (24 * 60 * 60 * 1000)) + "").padStart(2, "0"); //天
  //       t = t % (24 * 60 * 60 * 1000); //剩余计算小时的毫秒数
  //       let hour = (Math.floor(t / (60 * 60 * 1000)) + "").padStart(2, "0"); //时
  //       t = t % (60 * 60 * 1000);
  //       let minute = (Math.floor(t / (60 * 1000)) + "").padStart(2, "0"); //分
  //       t = t % (60 * 1000);
  //       let second = (Math.floor(t / 1000) + "").padStart(2, "0"); //秒
  //       let mSecond = ((t % 1000) + "").padStart(3, "0"); //毫秒

  //       this.setState({
  //         timeString: { day, hour, minute, second, mSecond },
  //       });
  //     } else {
  //       this.setState({
  //         timeString: "秒杀活动已经结束",
  //       });
  //     }
  //   }, 1);
  // }

  render() {
    let {
      cate,
      banner,
      getnew,
      getgoods,
      n,
      wanren,
      getskillist,
      home: { changeN },
    } = this.props;

    return (
      <div>
        <Header title="首页"></Header>
        <div className="headers">
          <div className="bootoms">
            <div className="logo">
              <img src={logo} alt="" />
            </div>
            <SearchBar
              placeholder="搜索商品"
              showCancelButton
              style={{
                "--border-radius": "100px",
                "--background": "#ffffff",
                "--height": "32px",
                "--padding-left": "12px",
              }}
            />
            <div className="icons">
              {" "}
              <img src={iconposi} alt="" />
            </div>
          </div>
        </div>

        {/* 头部 */}
        <Cate cate={cate}></Cate>
        {/* // 新人专享 */}
        <GetNew getnew={getnew}></GetNew>
        {/* // 轮播图 */}
        <Banner banner={banner}></Banner>
        {/* 秒杀 */}
        <SecKill getskillist={getskillist}></SecKill>
        {/* 选项卡 */}

        <Goods getgoods={getgoods} n={n} onChangeN={(n) => changeN(n)}></Goods>
        <Wanrentuan wanren={wanren}></Wanrentuan>
      </div>
    );
  }
}
const mapStateToprops = (state) => {
  return {
    cate: getCate(state),
    banner: getBanner(state),
    getnew: getNew(state),
    getgoods: getGoods(state),
    n: getN(state),
    wanren: getWanren(state),
    getskillist: getSkill(state),
  };
};
const mapDispatchToprops = (dispatch) => {
  return {
    home: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToprops, mapDispatchToprops)(Home);
